<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--优先使用IE最新版本和Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--移动设备上屏幕显示区域的设置-->
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!--主要是针对苹果手机将数字自动识别为号码-->
    <meta name="format-detection" content="telephone=no">
    <!--启用全屏模式，伪装app，离线应用。-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--隐藏状态栏/设置状态栏颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器-->
    <meta name="HandheldFriendly" content="True">
    <!-- 微软的老式浏览器 告诉浏览器页面为某个宽度特殊优化-->
    <meta name="MobileOptimized" content="width">
    <!--指定适合自己网站的渲染内核名称-->
    <meta name="renderer" content="webkit" />
    <title>爱投教-大师版</title>
    <link rel="stylesheet" type="text/css" href="./css/animate.min.css">
    <link rel="stylesheet" href="../css/navigation.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body>
<div class="navigation">
    <nav class="nav">
        <a href="../p1" class="nav-item" active-color="green">初级版</a>
        <a href="../p2" class="nav-item" active-color="orange">中级版</a>
        <a href="../p3" class="nav-item is-active" active-color="red">大师版</a>
        <span class="nav-indicator"></span>
    </nav>
</div>

<div class="container">
    <div class="content">
        <img class="main-bg" src="./images/master_bg.png">
        <a target="_blank" href="https://buy.homeway.com.cn/order/package?header=false&groupid=6001714"><img class="buybtn pulse animated infinite" id="buybtn" src="./images/master_btn.png"/></a>
        <a target="_blank" href="https://buy.homeway.com.cn/order/package?header=false&groupid=6001714"><img class="bottombuybtn pulse animated infinite" id="bottombuybtn" src="./images/bottom_btn.png"/></a>
        <div class="hoz-menu">
            <div class="menu-item item1" id="item1"><img src="./images/menu1.png"/></div>
            <div class="menu-item item2" id="item2"><img src="./images/menug2.png"/></div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="../js/navigation.js"></script>
<script type="text/javascript">
    window.onload = function(){
        let BUYBTNTOP = 0.142;          // 购买按钮top比
        let BUYBTN_WH_RATIO = 4.3333;    // 购买按钮宽高比
        let BUYBTN_HALL_RATIO = 0.0209;  // 购买按钮高占全高比
        let BOTTOMBTNTOP = 0.92;       // 底部购买按钮top比
        let BOTTOMBTN_WH_RATIO = 3; // 底部购买按钮宽高比
        let BOTTOMBTN_HALL_RATIO = 0.0349;  // 底部购买按钮高占全高比
        let MENUTOP = 0.188;            // menu top比
        let MENU_HALL_RATIO = 0.047353;    // menu整体高度比


        var dh = document.body.clientHeight;
        var buybtnTop = $("#buybtn").offset().top;
        var btnBuyW = $("#buybtn").width();
        var btnBuyH = $("#buybtn").height();

        var bottomBtnTop = $("#bottombuybtn").offset().top;
        var bottomBtnBuyW = $("#bottombuybtn").width();
        var bottomBtnBuyH = $("#bottombuybtn").height();

        var menuTop = $(".hoz-menu").offset().top;
        var itemH1, itemW1, itemWHRatio1, itemH2, itemW2, itemWHRatio2;

        $(document).ready(function(){//在文档加载完毕后执行

            btnBuyH = dh * BUYBTN_HALL_RATIO;
            btnBuyW = btnBuyH * BUYBTN_WH_RATIO;
            buybtnTop = BUYBTNTOP * dh;
            $("#buybtn").css("width", btnBuyW);
            $("#buybtn").css("height", btnBuyH);
            $("#buybtn").css("top", buybtnTop);
            $("#buybtn").css("margin-left", -btnBuyW/2);

            bottomBtnBuyH = dh * BOTTOMBTN_HALL_RATIO;
            bottomBtnBuyW = bottomBtnBuyH * BOTTOMBTN_WH_RATIO;
            bottomBtnTop = BOTTOMBTNTOP * dh;
            $("#bottombuybtn").css("width", bottomBtnBuyW);
            $("#bottombuybtn").css("height", bottomBtnBuyH);
            $("#bottombuybtn").css("top", bottomBtnTop);
            $("#bottombuybtn").css("margin-left", -bottomBtnBuyW/2);

            itemH1 = $(".item1").height();
            itemW1 = $(".item1").width();
            itemWHRatio1 = itemW1/itemH1;

            itemH2 = $(".item2").height();
            itemW2 = $(".item2").width();
            itemWHRatio2 = itemW2/itemH2;

            itemH1 = dh * MENU_HALL_RATIO;
            itemW1 = itemH1 * itemWHRatio1;
            $(".item1").css("width", itemW1);
            $(".item1").css("height", itemH1);
            itemH2 = dh * MENU_HALL_RATIO;
            itemW2 = itemH2 * itemWHRatio2;
            $(".item2").css("width", itemW2);
            $(".item2").css("height", itemH2);

            menuTop = MENUTOP * dh;
            $(".hoz-menu").css("top", menuTop);

            var onResize = function() {
                var dh = document.body.clientHeight;
                btnBuyH = dh * BUYBTN_HALL_RATIO;
                btnBuyW = btnBuyH * BUYBTN_WH_RATIO;
                buybtnTop = BUYBTNTOP * dh;

                $("#buybtn").css("width", btnBuyW);
                $("#buybtn").css("height", btnBuyH);
                $("#buybtn").css("top", buybtnTop);
                $("#buybtn").css("margin-left", -btnBuyW/2);

                bottomBtnBuyH = dh * BOTTOMBTN_HALL_RATIO;
                bottomBtnBuyW = bottomBtnBuyH * BOTTOMBTN_WH_RATIO;
                bottomBtnTop = BOTTOMBTNTOP * dh;

                $("#bottombuybtn").css("width", bottomBtnBuyW);
                $("#bottombuybtn").css("height", bottomBtnBuyH);
                $("#bottombuybtn").css("top", bottomBtnTop);
                $("#bottombuybtn").css("margin-left", -bottomBtnBuyW/2);
                //
                menuTop = MENUTOP * dh;
                $(".hoz-menu").css("top", menuTop);
                itemH1 = dh * MENU_HALL_RATIO;
                itemW1 = itemH1 * itemWHRatio1;
                $(".item1").css("width", itemW1);
                $(".item1").css("height", itemH1);
                itemH2 = dh * MENU_HALL_RATIO;
                itemW2 = itemH2 * itemWHRatio2;
                $(".item2").css("width", itemW2);
                $(".item2").css("height", itemH2);

            }

            window.onresize=onResize;

            $(".menu-item").click(function(){
                $("#item1").children("img").attr("src", "./images/menug1.png");
                $("#item2").children("img").attr("src", "./images/menug2.png");

                if($(this).attr("id") == "item1" || $(this).attr("id") == "item11") {
                    $("#item1").children("img").attr("src", "./images/menu1.png");
                    $("#item11").children("img").attr("src", "./images/menu1.png");
                    $(".main-bg").attr("src", "./images/master_bg.png");
                }else
                if($(this).attr("id") == "item2" || $(this).attr("id") == "item22") {
                    $("#item2").children("img").attr("src", "./images/menu2.png");
                    $("#item22").children("img").attr("src", "./images/menu2.png");
                    $(".main-bg").attr("src", "./images/master_bg1.png");
                }

            });

        })
    }

</script>
</body></html>